<script lang="ts" setup>
  import Alert from '@sscd/alert';
</script>

<template>
  <div class="demo">
    <div class="demo-title">含有辅助性文字介绍</div>
    <div class="demo-content">
      <Alert message="Success Text" type="success">
        <template #description>
          <p>
            Success Description
            <span style="color: red">Success</span>
            Description Success Description
          </p>
        </template>
      </Alert>
      <Alert
        class="mt12"
        message="Info Text"
        description="Info Description Info Description Info Description Info Description"
        type="info"
      />
      <Alert
        class="mt12"
        message="Warning Text"
        description="Warning Description Warning Description Warning Description Warning Description"
        type="warning"
      />
      <Alert
        class="mt12"
        message="Error Text"
        description="Error Description Error Description Error Description Error Description"
        type="error"
      />
    </div>
  </div>
</template>

<style lang="less" scoped>
  .mt12 {
    margin-top: 12px;
  }
</style>
